<template>
	<view class="invite-new-people">
		<view class="invite-new-people-head">
			邀请新人奖励设定
			<image :src="is_open == 1?openbtn:shutbtn" mode="" class="switch-btn" @click="curriculumSwitch"></image>
		</view>
		<view class="invite-new-people-subject" v-if="is_open == 1">
			<view class="">
				<view class="" style="display: inline-block;">
					邀请活动时间
				</view>
				<view class="" style="display: inline-block;">
					<view class="invite-new-people-starttime" @tap="date('start')">
						{{startTime}}
					</view>
					<view class="" style="display: inline-block; color: #666666;letter-spacing: -0.15px;">
						至
					</view>
					<view class="invite-new-people-endtime" @tap="date('end')">
						{{endTime}}
					</view>
				</view>
			</view>

			<view style="height: 2upx; background-color: #F2F2F2; margin: 20upx 0upx;"></view>
			<view class="">
				<view class="msg">
					活动规则
				</view>
				<textarea class="txt" placeholder="请输入邀请新人奖励规则，刺激家长分享，邀请家长" maxlength="40" v-model="reason" />
				</view>
		</view>
		<button class="invite-new-people-btn" @click="setInvite">保存</button>
		
		
		<uni-popup ref="wenzi" type="bottom" :maskClick=false>
			
			<view class="date-select">
				<view class="btn">
					<view class="btn-left" @tap="concel">
						取消
					</view>
					<view class="btn-right" @tap="confirm">
						确定
					</view>
				</view>
				<picker-view class="picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			const today = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			const startTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			const endTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			for (let i = date.getFullYear(); i <= 2040; i++) {
				years.push(i)
			}
			
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				is_open: 0,
				isstart : true,
				isswitch:false,
				openbtn:'https://tool.tuanhaoke.cn/static/image/member/manage-active_icon_Switch-On.png',
				shutbtn:'https://tool.tuanhaoke.cn/static/image/member/manage-active_icon_Switch-off.png',
				reason:'',
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				today,
				startTime,
				endTime,
				value: [0, month - 1, day - 1],
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				nian:'',
				yue:'',
				ri:'',
				id:'',
			}
		},
		onLoad() {
			this.getNewPeople()
		},
		filters:{
			formatDates(value) {
				let date = new Date(value * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '-' + MM + '-' + d;
			}
		},
		methods: {
			//邀请新人奖励开关
			curriculumSwitch(){
				if( this.is_open == 1 ){
					this.is_open = 0
				}else{
					this.is_open = 1
				}
				// this.isswitch = !this.isswitch
				// if(this.isswitch){
				// 	this.is_open = 1
				// }else{
				// 	this.is_open = 0
				// }
				console.log(this.is_open + "========================");
			},
			bindChange(e) {
				let a;
				let y;
				console.log(e,'454');
				let val = e.detail.value;
				y = this.years[val[0]];
				a = this.months[val[1]];
				this.day = this.days[val[2]];
				this.month = a;
				this.year = y;
				this.days = [];
				if (a||y) {
					if (a == 1 || a == 3 || a == 5 || a == 7 || a == 8 || a == 10 || a == 12) {
						for (let i = 1; i <= 31; i++) {
							this.days.push(i)
						}
					} else if (a == 4 || a == 6 || a == 11 || a == 9) {
						for (let i = 1; i <= 30; i++) {
							this.days.push(i)
						}
									
					} else if (a == 2) {
						if (this.year % 4 == 0 && (this.year % 100 != 0 || this.year % 400 == 0)) {
							for (let i = 1; i <= 29; i++) {
								this.days.push(i)
							}
						} else {
							for (let i = 1; i <= 28; i++) {
								this.days.push(i)
							}
						}
					}
							
				}
			},
			date(e) {
				if( e == 'start' ){
					this.isstart = true
				} else {
					this.isstart = false
				}
				console.log(e);
				this.$refs.wenzi.open();
				console.log();
			},
			concel(){
				this.$refs.wenzi.close();
			},
			confirm(){
				if (this.isstart){
					this.nian =this.year;
					this.yue = this.month;
					this.ri=this.day;
					this.startTime  = this.nian + '-' + this.yue + '-' + this.ri;
				} else {
					this.nian =this.year;
					this.yue = this.month;
					this.ri=this.day;
					this.endTime  = this.nian + '-' + this.yue + '-' + this.ri;
				}
				this.$refs.wenzi.close();
			},
			// 获取邀请奖励
			getNewPeople(){
				let data = {
					token:this.$store.getters.getToken,
					customer_id:this.$store.getters.getCustomerId,
					store_id:this.$store.getters.getStoreId,
				}
				console.log("8888888");
				// 3.发送请求
				this.$api.get_newPeople(data).then(res => {
					console.log(res,"+++++++++++++++++++++++++++++++++++++")
					if(res.status){
						this.startTime = res.data.start_time
						this.endTime = res.data.end_time
						this.is_open = res.data.is_open
						this.reason = res.data.content
						this.id = res.data.id
					}else{
						// uni.showToast({
						// 	title:res.msg,
						// 	icon:'none',
						// 	duration:2000
						// })
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 设置邀请奖励
			setInvite(){
				if(new Date(this.startTime).getTime() > new Date(this.endTime).getTime()){
					uni.showToast({
						title:"开始时间不能大于结束时间",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.reason == ''){
					uni.showToast({
						title:"请输入活动规则",
						icon:"none",
						duration:2000
					})
					return false
				}
				console.log("setEnrollmentDemand",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					id: this.id,
					customer_id:this.$store.getters.getCustomerId,
					store_id:this.$store.getters.getStoreId,
					start_time: this.startTime,
					end_time: this.endTime,
					is_open:this.is_open,
					content:this.reason,
				}
				console.log(data,"=========================");
				console.log("8888888");
				// 3.发送请求
				this.$api.set_invite(data).then(res => {
					console.log(res)
					if(res.status){
							uni.showToast({
								title:'添加成功!',
								icon:'none',
								duration:2000,
							})
							setTimeout(() => {
								uni.navigateTo({
									url:'../memberCenter?store_id='+ this.store_id
								})
							},1000)
							
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.invite-new-people{
		height: 100vh; 
		padding-top: 10upx;
		background: #F5F5F5;
	}
	.invite-new-people-head{
		margin: 20upx 0upx;
		font-size: 30upx;
		color: rgba(0,0,0,0.65);
		padding: 30upx;
		background-color: #ffffff;
	}
	.switch-btn{
		position: absolute;
		margin-top: -10upx;
		display: inline-block;
		right: 4%;
		width: 102upx;
		height: 62upx;
	}
	.invite-new-people-subject{
		font-size: 30upx;
		color: rgba(0,0,0,0.65);
		background-color: #ffffff;
		padding: 30upx;
	}
	.msg{
		font-family: PingFangSC-Medium;
		margin-top: 18upx;
		margin-bottom: 20upx;
		line-height: 42upx;
		letter-spacing: 0;
	}
	.txt{
		padding: 14upx;
		width: 666upx;
		height: 212upx;
		font-size: 24upx;
		background-color: #F5F5F5;
	}
	.invite-new-people-starttime{
		display: inline-block;
		width: 170upx;
		height: 60upx;
		padding: 0upx 20upx;
		line-height: 58upx;
		margin-left: 40upx;
		margin-right: 10upx;
		background: #F5F5F5;
		border-radius: 2px;
		color: rgba(51,51,51,0.85);
		vertical-align: middle;
	}
	.invite-new-people-endtime{
		display: inline-block;
		width: 170upx;
		height: 60upx;
		padding: 0upx 20upx;
		margin-left: 10upx;
		background: #F5F5F5;
		border-radius: 2px;
		line-height: 58upx;
		color: rgba(51,51,51,0.85);
		vertical-align: middle;
	}
	.date-select {
		width: 100%;
		height: 700upx;
		border-top-left-radius: 40upx;
		border-top-right-radius: 40upx;
		background-color: #FFFFFF;
		position: relative;
	}
	.picker-view {
		background-color: #EEEEEE;
		position: absolute;
		width: 100%;
		height: 500upx;
		bottom: 20upx;
	}
	.item {
		line-height: 100rpx;
		font-size: 34upx;
		text-align: center;
	}
			
	.btn{
		width: 100%;
		height: 100upx;
		/* // margin-top: 20upx;? */
		box-sizing: border-box;
		padding: 40upx 30upx;
	}
	.btn-left,.btn-right{
		color: #FFFFFF;
		width: 150upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 15upx;
	}
	.btn-left{
		background-color: #BEBEBE;
	}
	.btn-right{
		position: absolute;
		margin-top: -90upx;
		right: 30upx;
		background-color: #1cb419;
	}
	.invite-new-people-btn{
		width: 638upx;
		color: #ffffff;
		margin-top: 50upx;
		font-size: 34upx;
		line-height: 80upx;
		border-radius: 60upx;
		background-image: url(https://tool.tuanhaoke.cn/static/image/shortvideo/parent-clues-header.png);
	}
</style>
